<template>
	<div class="fl"> 
		<ul class="ul1">
			<li>不限</li>
			<li>1千米以内</li>
			<li>2千米-3千米</li>
			<li>3千米-5千米</li>
			<li>5千米-7千米</li>
			<li>7千米以外</li>
		</ul>
		</div>
		<div class="btn0">
			<button>重置</button>
			<button class="ok">确定</button>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		mounted: function() {
//			let screenMetro=JSON.parse(localStorage.getItem("screenMetro"));
//			console.log(screenMetro)
//			var cc = [];
//			for(var i=0;i<screenMetro.length;i++){
//				cc.push(screenMetro[i].metroName);
//			}
//			let arr = cc;
//			let resultarr = [...new Set(arr)]; 
//			$('ul').on('click','li',function(){
//				$(this).addClass('active').siblings().removeClass('active');
//				if($('.active').html()=='地铁'){
//					var cx='';
//					for(var i=0;i<resultarr.length;i++){
//						cx+='<li data-v-04ecba2d>'+resultarr[i]+'</li>'
//					}
//					$('.ul1').html(cx)
//				}
//			})
			
		},
		methods: {

		}
	}
</script>
<style scoped>
	.fl {
		position: absolute;
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}
	.quyu {
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #eee;
	}
	
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		color: #333;
		width: 100%;
		font-size: 15px;
		border-right: 1px solid #eee;
	}
	
	ul:last-child {
		border: 0;
	}
	
	ul li {
		text-align: center;
		line-height: 40px;
	}
	
	ul li.active {
		color: #0186c2;
	}
	
	.btn0 {
		display: flex;
		justify-content: space-around;
	}
	
	.btn0 button {
		width: 40%;
		margin: 40px 0 40px;
	}
	
	.btn0 button.ok {
		background-color: #0186c2;
		color: #fff;
	}
</style>